<template>
  <el-dialog
    :title="isEdit ? '编辑设备' : '新增设备'"
    :visible.sync="dialogVisible"
    width="30%"
    :close-on-click-modal="false"
    :before-close="close"
  >
    <div>
      <el-form ref="RefForm" :model="formData" label-width="80px" :rules="formRules" status-icon>
        <el-form-item class="wid" label="设备名称" prop="name">
          <el-input v-model="formData.name" class="wid" placeholder="请输入设备名称"></el-input>
        </el-form-item>
        <el-form-item class="wid" label="IP地址" prop="ip">
          <el-input v-model="formData.ip" class="wid" placeholder="请输入IP地址"></el-input>
        </el-form-item>
        <el-form-item class="wid" label="端口" prop="port">
          <el-input v-model="formData.port" class="wid" placeholder="请输入端口"></el-input>
        </el-form-item>
        <el-form-item class="wid" label="通讯密码" prop="pass">
          <el-input v-model="formData.pass" class="wid" placeholder="请输入通讯密码"></el-input>
        </el-form-item>
        <el-divider v-if="isEdit" content-position="left">以下参数暂支持查看不支持设置</el-divider>
        <el-form-item v-if="isEdit" class="wid" label="识别分数">
          <el-input v-model="formData.identifyScores" disabled class="wid" placeholder="请输入识别分数"></el-input>
        </el-form-item>
        <el-form-item v-if="isEdit" class="wid" label="串口模式">
          <el-select v-model="formData.comModType" disabled style="width: 100%" placeholder="请选择">
            <el-option v-for="item in serialPort" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="isEdit" class="wid" label="韦根输出">
          <el-select v-model="formData.wg" style="width: 100%" disabled placeholder="请选择">
            <el-option v-for="item in wiegand" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-divider v-if="isEdit" content-position="left">刷卡</el-divider>
        <el-form-item v-if="isEdit" class="wid" label="外设接口">
          <el-select v-model="formData.recModeCardIntf" style="width: 100%" disabled placeholder="请选择">
            <el-option v-for="item in peripheral" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button :loading="loadingSubmit" type="primary" @click="submitHandle">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import dialogEditMixin from '@/mixins/dialogEdit'
import { eleValidator } from '@/utils/tools'
export default {
  mixins: [dialogEditMixin],
  data() {
    return {
      id: null,
      loadingSubmit: false,
      // 串口
      serialPort: [
        { label: '1: 开门', value: 1 },
        { label: '2: 不输出', value: 2 },
        { label: '3: 输出人员id', value: 3 },
        { label: '4: 输出身份证/IC卡', value: 4 }
      ],
      // 韦根输出
      wiegand: [
        { label: '输出卡号（WG26）', value: '#WG{idcardNum}#' },
        { label: '输出人员ID（WG26）#', value: '#WG{id}#' },
        { label: '输出卡号（WG34）#', value: '#34WG{idcardNum}#' },
        { label: '输出人员ID（WG34）', value: '#34WG{id}#' }
      ],
      peripheral: [
        { label: 'TTL串口', value: 1 },
        { label: '232串口', value: 2 }
      ],
      formRules: {
        name: [
          { required: true, message: '请输入设备名称', trigger: 'blur' },
          {
            validator: eleValidator([{ rule: 'isEmpty', msg: '设备名称不能为空' }]),
            trigger: 'blur'
          }
        ],
        ip: [
          { required: true, message: '请输入IP地址', trigger: 'blur' },
          {
            validator: eleValidator([
              { rule: 'isEmpty', msg: 'ip地址不能为空' },
              { rule: 'isIp', msg: '格式错误' }
            ]),
            trigger: 'blur'
          }
        ],
        port: [
          { required: true, message: '请输入端口', trigger: 'blur' },
          {
            validator: eleValidator([
              { rule: 'isEmpty', msg: '端口不能为空' },
              { rule: 'isNumber', msg: '只能输入数字' }
            ]),
            trigger: 'blur'
          }
        ],
        pass: [
          { required: true, message: '请输入通讯密码', trigger: 'blur' },
          {
            validator: eleValidator([
              { rule: 'isEmpty', msg: '通讯密码不能为空' },
              { rule: 'isNumber', msg: '通讯密码只能输入数字' }
            ]),
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    resetFormData() {
      this.formData = {
        name: '', // 姓名
        ip: '', // ip地址
        port: '', // 端口
        pass: '', // 密码
        imgRegCallBack: '', // 拍照回调接口
        identifyCallBack: '', // 人脸识别回调接口
        identifyScores: 80, // 识别分数
        comModType: 4, // 串口模式
        wg: '#WG{idcardNum}#', // 韦根输出
        recModeCardIntf: 1 // 外设接口
      }
    },
    submitHandle() {
      let obj = {
        name: this.formData.name, // 姓名
        ip: this.formData.ip, // ip地址
        port: this.formData.port, // 端口
        pass: this.formData.pass, // 密码
        imgRegCallBack: '', // 拍照回调接口
        identifyCallBack: '', // 人脸识别回调接口
        faceConfig: {
          identifyScores: parseFloat(this.formData.identifyScores), // 识别分数
          comModType: this.formData.comModType, // 串口模式
          wg: this.formData.wg, // 韦根输出
          recModeCardIntf: this.formData.recModeCardIntf // 外设接口
        }
      }
      this.formData = JSON.parse(JSON.stringify(obj))
      this.handleSubmit()
    },
    responseDataHandleProgram(res) {
   
      let formKeys = Object.keys(this.formData)
      formKeys.forEach(item => {
        this.formData[item] = res.data[item]
      })
      let obj = res.data.faceConfig || ''
  
      if (!obj) {
        this.formData.identifyScores = 80 // 识别分数
        this.formData.comModType = 4 // 串口模式
        this.formData.wg = '#WG{idcardNum}#' // 韦根输出
        this.formData.recModeCardIntf = 1 // 外设接口
        return
      }

      this.formData.identifyScores = obj.identifyScores // 识别分数
      this.formData.comModType = obj.comModType // 串口模式
      this.formData.wg = obj.wg // 韦根输出
      this.formData.recModeCardIntf = obj.recModeCardIntf // 外设接口
    }
  }
}
</script>

<style lang="scss" scoped></style>
